import { Component, ReactNode } from "react"
// 所谓的组合就是vue里的插槽
// 更灵活的扩展组件的结构
type Iprops = {
    children?:ReactNode;
    header?:ReactNode;
    main?:ReactNode;
}
class Composition extends Component<Iprops,any> {
    render(): ReactNode {
        console.log(this.props);
        return(
            <fieldset>
                <legend>组合</legend>
                <h1>123</h1>
                {this.props.children}
                <div className="header">
                    {this.props.header}
                </div>
                <div className="main">
                    {this.props.main}
                </div>
            </fieldset>
        )
    }
}

export default Composition